@import "_normalize";
@import "_reset";
@import "_dev";
@import "_setting";
@import "_ruler";
@import "_mixin";
@import "_anim";
@import "_icon";
@import "_btn";
@import "_dialog";
// 下面这行 _wptr 编译时使用,不能删
//@import "_wptr";


.webim-touch{
	position: absolute;
	width: 100%;
	/*height: 100vh;*/
	top: 0;
	left: 0;
	z-index:20000;
	overflow-y: hidden;
	background-color:#FFF;
	
	.im-transparent{
		opacity: 0
	}
	
	.im-disabled{
		color: #999!important;
		filter: grayscale(100%);
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
	}
	
	.im-mask{
		width: 100%;
		height: 100%;
		//background-color: rgba(0,0,0,.3);
		position:absolute;
		top:0;
		left:0;
		z-index:20999;
	}
	
	.im-mask-bgc000{
		background-color: rgba(0,0,0,.3);
	}
	
	.im-mask-bgcfff{
		background-color: rgba(255,255,255,1);
	}
	
	.im-loading-content{
		color: #ccc;
		text-align:center;
		position:relative;
	}
	
	.im-txt-loading{
		padding:.3rem;
	}
	
	.im-page{
		width: 100%;
		height: 100%;
	}
	.im-header{
		@include box-sizing;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2.2rem;
		line-height: 2.2rem;
		background: #f7f7f7;
		border-bottom: 1px solid $h-border;
		z-index: 20010;
		h2{
			position: relative;
			font-size: .85rem;
			padding: 0 2.4rem;
			font-weight: normal;
			text-align: center;
			
			.im-chat2-username{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				display: inline-block;
				max-width: 8rem;
				max-width: -webkit-calc(100% - 3rem);
				max-width: calc(100% - 3rem);
				vertical-align: top;
			}
		}
		.im-l-icon,.im-r-icon{
			display: block;
			position: absolute;
			width: 2rem;
			height: 2rem;
			top: .1rem;
			text-align: center;
			z-index: 20011;
		}
		.im-l-icon{
			left: .1rem;
		}
		.im-r-icon{
			right: .1rem;
		}
		.im-r-profile{
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			color: #333;
			font-size: .75rem;
			margin-right: .75rem;
		}
	}
	.im-body{
		background: #f2f2f2;
		@include box-sizing;
		height: 100%;
		margin-top: 2.2rem;
		position:relative;
		
		.im-content{
			height:100%;
			overflow:auto;
			-webkit-overflow-scrolling: touch;
		}
	}

	.im-search{
		position: absolute;
		top: 0;
		left: 0;
		@include box-sizing;
		width: 100%;
		height: 2.2rem;
		background: #fff;
		border-bottom: 1px solid $border;
		padding: .35rem .4rem 0;
		z-index: 20010;
		.im-search-input{
			float: left;
			width: 100%;
			height: 1.5rem;
			position: relative;
			input{
				@include box-sizing;
				width: 100%;
				height: 1.5rem;
				border: 0;
				font-size: .65rem;
				padding: .25rem 1.4rem;
				background: #f2f2f2;
				border-radius: .15rem;
			}
			.im-icon{
				position: absolute;
				left: 0;
				top: 0;
				display: block;
				height: 1.5rem;
				width: 1.25rem;
				text-align: center;
				line-height: 1.5rem;
				font-size: .7rem;
				color: #9a9a9a;
			}
			.im-icon:nth-of-type(2){
				left: auto;
				right: 0;
			}
		}
		
		.im-cancel{
			float: right;
			margin-left: .4rem;
			font-size: .7rem;
			line-height: 1.5rem;
			color: #269aff;
			display: none;
		}
	}
	
	.im-search.im-search-on{
		.im-search-input{
			width: 83%;
			width: calc(100% - 3rem);
			width: -webkit-calc(100% - 3rem);
		}
		
		.im-cancel{
			display: inline;
		}
	}
	
	.im-contact-box{
		// padding-top: 2.2rem;
		height: calc(100vh - 4.4rem);
		height: -webkit-calc(100vh - 4.4rem);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.im-contacts-list{
		padding-top: 2.2rem;
	}
	.im-contact-list{
		padding-top: .25rem;
		li{
			margin-bottom: .25rem;
			position: relative;
		}
		li:last-child{
			margin-bottom: 0;
		}
		.im-contact-info{
			left: 0;
			//-webkit-transition: left .15s ease-out;
			//transition: left .15s ease-out;
			
			&.im-contact-info-del-status{
				left: -3.75rem;
			}
		}
		
		.im-contact-del{
			position: absolute;
			top: 0;
			right: 0;
			width: 3.75rem;
			height: 3.75rem;
			text-align: center;
			z-index: 20001;
			.im-icon{
				font-size: .7rem;
				line-height: 2rem;
				color: $red;
			}
		}
	}
	.im-contact-info{
		padding-top: .75rem;
		position: relative;
		z-index: 20002;
		height: 3rem;
		background: #fff;
		border-bottom: 1px solid $border;
		.im-head{
			float: left;
			width: 2.25rem;
			height: 2.25rem;
			margin: 0 .5rem;
			overflow: hidden;
			border-radius: .1rem;
			img{
				width: 2.25rem;
				height: 2.25rem;
			}
		}
		.im-offline{
			filter: grayscale(1);
			-webkit-filter: grayscale(1);
			filter: gray;
		}
		.im-info{
			overflow: hidden;
			padding-right: .4rem;
			.im-top-txt{
				font-size: .75rem;
				line-height: .9rem;
				padding-bottom: .45rem;
			}
			.im-name{
				float: left;
				max-width: 7.25rem;
				max-width: calc( 100% - 5rem);
				max-width: -webkit-calc( 100% - 5rem);
				@extend %cutxt;
			}
			.im-time{
				float: right;
				font-size: .6rem;
			}
			.im-bottom-txt{
				font-size: .7rem;
				line-height: .9rem;
				color: #999;
			}
			.im-corp{
				float: left;
				width: 11rem;
				width: calc(100% - 1.25rem);
				width: -webkit-calc(100% - 1.25rem);
				@extend %cutxt;
			}
			.im-num{
				float: right;
				width: .8rem;
				height: .8rem;
				border-radius: 50%;
				background: #269aff;
				font-size: .45rem;
				text-align: center;
				line-height: .8rem;
				color: #fff;
				font-style: normal;
			}
		}
	}
	.im-search-list{
		li{
			position: relative;
		}
	}
	//联系人资料
	.im-detail-wrap{
		.im-contact-info{
			height: auto;
			padding-bottom: .7rem;
		}
		.im-top-txt{
			.im-name{
				color: #666;
			}
		}
		.im-info .im-bottom-txt{
			color: #333;
			font-weight: bold;
			font-size: .75rem;
			.im-corp{
				//width: auto;
				// white-space: normal;
			}
		}
	}
	.im-contact-detail{
		padding-left: .75rem;
		background: #fff;
		margin-top: .25rem;
	}
	.im-table-detail{
		width: 100%;
		table-layout: fixed;
		font-size: .7rem;
		line-height: .9rem;
		th,td{
			height: 1.2rem;
			padding: .5rem 0;
			border-bottom: 1px solid $border;
		}
		th{
			width: 50%;
			color: #666;
			text-align: left;
			font-weight: normal;
		}
		td{
			padding-right: .75rem;
			text-align: right;
			
			span{
				word-break: break-all;
			}
		}
		img{
			height: 1.2rem;
			margin-left: .5rem;
			vertical-align: middle; 
		}
	}
	.im-btn-wrap{
		//position:absolute;
		@include box-sizing;
		width: 100%;
		background: #fff;
		padding: .75rem .75rem 0;
		.im-btn{
			margin-bottom: .5rem;
			.im-icon{
				display: inline-block;
				vertical-align: top;
				margin-right: .1rem;
			}
		}
	}
	.im-empty{
		margin: 40% 0;
		font-size: .7rem;
		color: #ccc;
		font-style: italic;
		text-align: center;
	}
	.im-backhome{
		@include box-sizing;
		display: block;
		width: 55%;
		height: 1.5rem;
		border: .05rem solid #269aff;
		color: #269aff;
		margin: 0 auto;
		font-size: .65rem;
		padding: 0;
		background: transparent;
		border-radius: .1rem;
	}
	.im-pop-btnwrap{
		position: absolute;
		@include box-sizing;
		width: 100%;
		padding: 0 .75rem;
		bottom: 0;
		z-index:21000;
		.im-btn{
			margin-bottom: .5rem;
		}
		.im-btn-border{
			border: 0;
		}
	}
	.im-dot{
		display: inline-block;
		width: .4rem;
		height: .4rem;
		border-radius: 50%;
		vertical-align: middle;
		margin-left: .4rem;
	}
	.im-dot-online{
		background: #38c262;
	}
	.im-dot-offline{
		background: #ccc;
	}
	
	.im-chat-box{
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		@include box-sizing;
		height:100%;
		padding-bottom:2.5rem;
		background-color:#f2f2f2;
	}
	
	// .im-chat-box-face-show{
	// 	padding-bottom:12rem;
	// }
	// .im-chat-box-keyboard-show{
	
	// }
	
	.im-pro-box-blocktip{
		position: absolute!important;
		top: 0;
		left: 0;
		width: 100%;
		background:rgba(255,255,102,.85)!important;
		z-index: 20100;
	}
	
	.im-pro-txt{
		font-size: .55rem;
		line-height: .77rem;
	}
	.im-pro-box{
		background: #fff;
		padding: .75rem 0;
		border-top: 1px solid #e5e5e5;
		border-bottom: 1px solid #e5e5e5;
		margin-bottom: .5rem;
		position: relative;
		
		.im-icon-close{
			position: absolute;
			top: 0;
			right: 0;
		}
		
		.im-pro-img{
			float: left;
			width: 4rem;
			height: 4rem;
			margin: 0 0 0 .5rem;
			position: relative;
			img{
				@extend %autoCenter;
				max-width: 4rem;
				max-height: 4rem;
			}
		}
		.im-pro-info{
			overflow: hidden;
			padding: 0 .75rem;
			.im-pro-name{
				padding-bottom: .25rem;
				font-size: .7rem;
				line-height: .9rem;
			}
			.im-pro-txt{
				margin: 0;
				color: #666;
				b{
					font-weight: normal;
					color: $red;
				}
				span{
					color: #999
				}
			}
		}
		.im-btn-sendlink{
			@include box-sizing;
			display: inline-block;
			height: 1.15rem;
			border: .05rem solid #269aff;
			padding: 0 .8rem;
			color: #269aff;
			font-size: .65rem;
			margin: .4rem 0 1px;
			background: transparent;
			border-radius: .1rem;
			line-height: 1.05rem;
		}
	}
	
	.im-content-wrap{
		padding: .5rem;
		.im-content-box{
			position: relative;
			width: 100%;
			min-height: 2rem;
			margin-top: -.1rem;
		}
		.im-head{
			position: absolute;
			bottom: 0;
			width: 2rem;
			height: 2rem;
			overflow: hidden;
			border-radius: .1rem;
			img{
				width: 2rem;
				height: 2rem;
			}
		}
		.im-sendRfq{
			@include box-sizing;
			position: relative;
			padding: .5rem;
			//width: 90%;
			border-radius: .4rem;
			font-size: .7rem;
			line-height: .9rem;
			margin: .1rem auto 0 auto;
			word-wrap: break-word;
			background-color: #fff391;
			color: #f95800;
			
			a{
				font-weight: bold;
				text-decoration: underline;
				color: #f95800;
			}
		}
		.im-inner{
			@include box-sizing;
			position: relative;
			padding: .5rem;
			max-width: 50%;
			max-width: calc(100% - 6rem);
			max-width: -webkit-calc(100% - 6rem);
			border-radius: .4rem;
			font-size: .7rem;
			line-height: .9rem;
			margin-top: .1rem;
			word-wrap: break-word;
			
			&:after{
				content: "";
				position: absolute;
				bottom: 0;
				width: .5rem;
				height: .5rem;
				background-size: .65rem auto !important;
			}
		}
		.im-self{
			.im-head{
				right: 0;
			}
			.im-inner{
				float: right;
				margin-right: 2.5rem;
				background: #269aff;
				color: #fff;
				&:after{
					right: -.25rem;
					background: url(#{$mstatic}/img/bubble-r.png) no-repeat right bottom;
				}
				
				img{
					border: 0 none;
					max-width: 100%;
					max-height: 8rem;
				}
			}
		}
		.im-other{
			.im-head{
				left: 0;
			}
			.im-inner{
				float: left;
				margin-left: 2.5rem;
				background: #fff;
				color: #333;
				&:after{
					left: -.25rem;
					background: url(#{$mstatic}/img/bubble-l.png) no-repeat left bottom;
				}
				
				img{
					border: 0 none;
					max-width: 100%;
					max-height: 8rem;
				}
			}
		}
	}
	.im-chattime{
		text-align: center;
		margin: 0;
		font-size: .65rem;
		color: #999;
		line-height: 1rem;
	}
	.im-contacts{
		position: relative;
	}
	//底部
	.im-input-box{
		width: 100%;
		position: absolute;
		bottom: 0;
		z-index: 20010;
		.im-foot{
			@include box-sizing;
			width: 100%;
			min-height: 2.5rem;
			background: #f7f7f7;
			border-top: 1px solid #e2e2e2;
			border-bottom: 1px solid #e2e2e2;
			position: relative;
		}
		.im-l-func{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 12.5%;
		}
		.im-c-func{
			@include box-sizing;
			width: 67.5%;
			border: 1px solid #e2e2e2;
			border-radius: .15rem;
			margin: .35rem 0 .35rem 12.5%;
			padding: .385rem .5rem;
			background-color: #fff;
			
			.im-enterarea{
				@include box-sizing;
				display: block;
				width: 100%;
				height: 1.4em;
				line-height: 1.4em;
				border: 0 none;
				background:none;
				background-color:#FFF;
				font-size: .7rem;
				resize: none;
				margin: 0;
				padding: 0;
			}
		}
		
		.im-r-func{
			position: absolute;
			right: 0;
			bottom: 0;
			width: 20%;
			.im-btn{
				float: left;
				background: #269aff;
				width: 2.4rem;
				height: 1.5rem;
				margin: .5rem 0 .5rem .4rem;
				line-height: 1.5rem;
				font-size: .7rem;			
			}
		}
	}
	
	.im-face{
		background:#fff;
		overflow:hidden;
		
		.im-face-container{
			width: 400%;
			margin-left: 0;
		}
		.im-face-container-anim{
			-webkit-transition: margin .3s ease-out;
			transition: margin .3s ease-out;
		}
		
		.im-face-container.im-face-tab-0{
			margin-left: 0;
		}
		
		.im-face-container.im-face-tab-1{
			margin-left: -100%;
		}
		
		.im-face-container.im-face-tab-2{
			margin-left: -200%;
		}
		
		.im-face-box{
			width: 100vw;
			height: 8.9rem;
			background-size: auto 8.9rem !important;
			float: left;
		}
		.im-face-list{
			width: 16rem;
			height: 8.9rem;
			margin: 0 auto;
			> i{
				@include box-sizing;
				float: left;
				display: block;
				width: 14.2857142857%;
				height: 2.225rem;
				border: 1px solid #fff;
				
				&:active{
					border: 1px solid #b2b2b2;
				}
			}
		}
		@for $i from 1 through 3 {
			.im-facebox#{$i}{
				background: url(#{$mstatic}/img/face#{$i}.png) no-repeat top center;
			}
		}
		.im-facetrigger{
			padding-bottom: .3rem;
			font-size:0;
			text-align: center;
			> i{
				display: inline-block;
				margin: 0 .2rem;
				background: #e5e5e5;
				width: .3rem;
				height: .3rem;
				border-radius: 50%;
				font-size:0;
			}
			.on{
				background: #43a7ff;
			}
		}
	}
	
	//表情sprite

	//第一、二张
	$faceWidth: (36 + 36) / 36;
	$faceHeight: (36 + 36) / 36;
	$pw: 18 / 36;
	$ph: 18 / 36;
	
	.im-chatface{
		display: inline-block;
		vertical-align: baseline;
		width: 1rem;
		height: 1rem;
		background-size: ($faceWidth * 7) * 1rem auto !important;
	}
	
	@for $k from 1 through 2 {
		@for $i from 1 through 4{
			@for $j from 1 through 7 {
				.im-f#{$k}-#{($i - 1)*7 + $j} {
					background: url(#{$mstatic}/img/face#{$k}.png) no-repeat center;
					background-position-x: - (($j - 1) * $faceWidth + $pw) * 1rem;
					background-position-y: - (($i - 1) * $faceHeight + $ph) * 1rem;
				}
			}
		}
	}
	//第三张
	@for $j from 1 through 4{
		.im-f3-#{$j} {
			background: url(#{$mstatic}/img/face3.png) no-repeat center;
			background-position-x: - (($j - 1) * $faceWidth + $pw) * 1rem;
			background-position-y: - $ph * 1rem;
		}
	}

	// 被踢下线
	.im-kickout{
		@include box-sizing;
		padding: 1rem 0 0 0;
		height:100%;
		background-color: #f7f7f7;
		
		&-icon{
			text-align: center;
		}
		
		&-text{
			padding: 1rem 1rem 2rem 1rem;
			margin: 0;
			font-size: .65rem;
			text-align: center;
			
			p{
				margin:0;
				padding: 0;
				
				&:nth-child(2){
					margin-top: .5rem;
				}
			}
			
		}
		
		&-action{
			text-align: center;
			font-size: .7rem;
		}
		
		&-reset,&-relogin{
			@include box-sizing;
			display: inline-block;
			width: 75%;
			height: 2rem;
			padding: .5rem;
			margin-top: .5rem;
			line-height: 1rem;
		}
		
		&-reset{
			background-color: #fff;
			color:#1f98ff;
		}
		
		&-relogin{
			color:#fff;
			background-color: #1f98ff;
			border-radius: .25rem;
		}
	}





}




